<template>
  <el-dialog
    :title="tableInfoTitle"
    :visible.sync="tableInfoOpen"
    width="600px"
    append-to-body
    :close-on-click-modal="false"
    :before-close="closeTableInfoDialog"
    @close="closeDialog"
  >
    <el-form ref="tableInfoForm" :model="tableInfoForm" :rules="tableInfoRules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="表名称" prop="tableName">
            <el-input v-model="tableInfoForm.tableName" placeholder="请输入表名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="表别名" prop="tableAlias">
            <el-input v-model="tableInfoForm.tableAlias" placeholder="请输入表别名" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="顺序号" prop="orderNo" >
            <el-input v-model="tableInfoForm.orderNo" placeholder="请输入顺序号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="表类型" prop="tableType">
            <el-radio-group v-model="tableInfoForm.tableType">
              <el-radio label="0">目录表</el-radio>
              <el-radio label="1">元数据表</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="tableInfoSubmit">确 定</el-button>
      <el-button @click="closeTableInfoDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { submitLastTableAdd, submitLastTableEdit } from '@/api/system/sort'

export default {
  name: 'lastDialog',
  props:['tableInfoTitle','tableInfoOpen','tableInfoForm','getList','closeTableInfo'],
  data(){
    return {
      tableInfoRules:{ //底层表单验证
        tableName:[
          {required:true,message:"表名称不能为空",trigger:"blur"},
          {pattern:'^[A-Za-z_]+$',message:"请输入英文和下划线",trigger:"blur"}
        ],
        tableAlias:[
          {required:true,message:"表别名不能为空",trigger:"blur"},
          {pattern:'^[\u4E00-\u9FA5]+$',message:"请输入中文",trigger:"blur"}
        ],
        tableType:[
          {required:true,message:"表类型不能为空",trigger:"blur"}
        ],
        orderNo: [
          {required:true,message:"顺序号不能为空",trigger:"blur"},
          { pattern:'^\\d+$|^\\d+[.]?\\d+$',message: "请输入数字", trigger: "blur"}
        ],
      },
    }
  },
  methods:{
    closeDialog(){
      for (const key in this.tableInfoForm) {
        this.tableInfoForm[key] = ''
      }
      this.tableInfoForm.tableType = '0'
    },
    closeTableInfoDialog(){
      this.closeTableInfo()
    },
    // 提交底层添加表信息
    tableInfoSubmit(){
      this.$refs.tableInfoForm.validate(async vaild => {
        if(!vaild){
          return
        }
        this.$confirm('确认提交吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if(this.tableInfoTitle === '新增表信息'){
              this.add()
            }else {
              this.update()
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消提交'
            });
          });
        });
      },
    async add(){
      const res = await submitLastTableAdd(this.tableInfoForm)
      if(res.code === 200){
        this.msgSuccess("新增成功");
        this.closeTableInfoDialog()
        this.getList();
      }
    },
    async update(){
      const res = await submitLastTableEdit(this.tableInfoForm)
      if(res.code === 200){
        this.msgSuccess("修改成功");
        this.closeTableInfoDialog()
        this.getList();
      }
    }
  }
}
</script>

<style scoped>

</style>
